<style>

</style>
<template>
<div class="con">
    <!-- <ul>
        <li v-for="(todo,$index) in todos"  :key="$index" >
            <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
            <span :class="{ done: todo.done }">{{ todo.text }}</span>
            <button @click="remove(todo)">delete</button>
        </li>
        <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
    </ul> -->
    <Row :gutter="15">
        <Col span="6">
            <box-user-nav></box-user-nav>
        </Col>
        <Col span="12">
            <transition name="page">
                <nuxt-child/>
            </transition>
        </Col>
        <Col span="6">
            <box-user-nav></box-user-nav>
        </Col>
    </Row>
    
</div>
</template>

<script>

import axios from "../tools/axios";
import { mapMutations } from 'vuex'
export default {
  middleware: 'auth',
  head(){
      return {
          title:'list'
      }
  }
  ,computed:{
    todos () { return this.$store.state.todos.list }
  },methods:{
      addTodo(e){
          this.$store.commit('todos/add',e.target.value);
          e.target.value='';
      },...mapMutations({
          toggle:'todos/toggle',
          remove:'todos/remove'
      })
  },
}
</script>

<style>

</style>
